import Vue from 'vue'
// 1. 引入 vuex
import Vuex from 'vuex'

// 1.2 导入 xian 和 chengdu 两个模块
import xianModule from './modules/xian'
import chengduModule from './modules/chengdu'

// 2. 注册 vuex
Vue.use(Vuex)

// 3. 实例化 vuex.Store 对象
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {
    // 定义一个getter，相当于store中的计算属性
    // 这个getter要做两个模块中的数据做加法运算
    // 所以我们定义到根store实例中
    totalCount(state) {
      return state.xian.count + state.chengdu.count
    },
    // 快捷访问，直接通过根 store 下面的getters快捷访问到模块下面的数据
    xian(state) {
      return state.xian.count
    }
  },
  // 模块声明
  modules: {
    xian: xianModule,
    chengdu: chengduModule
  }
})

// 4. 注入 store 到 vue 根实例中
// 但是，这一步不在这里做，因为这里没有拿到 vue 的根实例
// 所以，这里需要导出 store 对象，在外面去注入
// 外面：main.js
export default store
